<template>
  <div class="download-wrapper">
    <div class="download-files">
      <div class="card card-list" v-if="path.length">
        <div class="card-block">
          <button @click="backFile">返回</button>
        </div>
      </div>
      <div class="card  card-list" v-for="file in files">
        <div class="card-block">
          <a v-if="file.dl" :href="file.path" target="_blank">下载 </a>
          <a v-if="!file.dl" href="javascript:void(0)" @click="openFolder(file.name)">打开</a>
          <p class="file-title text-center" v-text="file.name"></p>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let browse = '/api/browse'
  export default {
    name: 'download',
    data () {
      return {
        files: [],
        path: [],
        browseUrl: browse
      }
    },
    mounted () {
      this.getFiles(this.browseUrl)
    },
    methods: {
      openFolder (floderName) {
        this.path.push(floderName)
        this.browseUrl = browse + '/' + this.path.join('/')
        this.getFiles(this.browseUrl)
      },
      backFile () {
        if (this.path.length - 1 === -1) {
          return
        }
        this.path = this.path.slice(0, this.path.length - 1)
        this.browseUrl = browse + '/' + this.path.join('/')
        this.getFiles(this.browseUrl)
      },
      getFiles (url) {
        let _this = this
        this.$http(url).then(response => {
          _this.files = response.data.sort(function (f, b) {
            return f.dl - b.dl
          })
        }, error => {
          console.log(error)
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
